<template>
	<view class="store_login">
		<view
			class="status_bar_h"
			:style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="main">
			<view class="title"> 请输入设备 ID </view>
			<view class="form">
				<view class="user_name">
					<up-input
						v-model="form.user_name"
						type="text"
						color="#28c170"
						shape="circle"
						:customStyle="{
							border: '2rpx solid #28c170!important',
						}"
						placeholder="请输入账号">
					</up-input>
				</view>
				<!-- <view class="user_pass">
					<up-input
						v-model="form.user_pass"
						type="text"
						color="#28c170"
						shape="circle"
						:customStyle="{
							border: '2rpx solid #28c170!important',
						}"
						placeholder="请输入密码">
					</up-input>
				</view> -->
			</view>
			<div class="btn_box">
				<view
					class="btn"
					@click="reset"
					>重置</view
				>
				<view
					class="btn"
					@click="confirm"
					>确认</view
				>
			</div>
		</view>
	</view>
</template>

<script>
import useStore from '@/store/index.js';
import baseURL from '@/config/baseURL.js';
export default {
	components: {},
	data() {
		return {
			baseURL,
			form: {
				user_name: '',
				user_pass: '',
			},
			timer: null,
		};
	},
	mounted() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
		this.countdown();
	},
	methods: {
		countdown() {
			this.timer = setTimeout(() => {
				// uni.navigateTo({
				// 	url: '/pages/index/index',
				// });
			}, 1000 * 60 * 10);
		},
		clearCountdown() {
			clearTimeout(this.timer);
			this.countdown();
		},
		checkForm() {
			const { user_name } = this.form;
			return user_name ? true : false;
		},
		confirm() {
			if (this.checkForm()) {
				const { user_name } = this.form;
				uni.showToast({
					title: '点击按钮',
					duration: 1000,
				});
				uni.request({
					url: baseURL + '/api/index/getEquipmentStore',
					data: { equipmentID: uni.$u.trim(user_name, 'all') },
					header: {
						Accept: 'application/json',
						'Content-Type': 'application/json',
						'X-Requested-With': 'XMLHttpRequest',
					},
					method: 'POST',
					sslVerify: false,
					success: res => {
						const resOptions = res;
						uni.request({
							url: baseURL + '/api/index/getstoreDetails',
							data: { store_id: res.data.data.store_id },
							header: {
								Accept: 'application/json',
								'Content-Type': 'application/json',
								'X-Requested-With': 'XMLHttpRequest',
							},
							method: 'GET',
							sslVerify: false,
							success: res => {
								// this.view.store = res.data.data.name;
								console.log('equipmentOptions---=====');
								console.log('res.data.data', res);
								const _src = res.data?.data.imagejh
									? res.data?.data.imagejh.split(',')
									: [];
								this.src = _src.map(item => baseURL + item);
								console.log('this.src', this.src);
								uni.setStorageSync(
									'equipmentOptions',
									JSON.stringify({
										...resOptions,
										...res.data.data,
										equipmentID: uni.$u.trim(user_name, 'all'),
									})
								);
								uni.showToast({
									title: '关闭',
									duration: 1000,
								});
								this.$emit('handClose');
							},
							fail: error => {},
						});
					},
					fail: error => {},
				});
			} else {
				uni.showToast({
					title: '请输入账号',
					duration: 1000,
				});
			}
		},
		reset() {
			this.form.user_name = '';
		},
		close() {
			this.isCouponShow = false;
		},
		jump(data) {
			let url = '';
			switch (data) {
				case 'register':
					url = '/pages/register/register';
					break;
				case 'codeLogin':
					url = '/pages/menu/menu';
					break;
				case 'scanCode':
					url = '/pages/scanCode/scanCode';
					break;
				case 'pay':
					url = '/pages/pay/ticket';
					break;
				case 'logout':
					url = '/pages/index/index';
					break;
				default:
			}
			uni.navigateTo({ url });
		},
		logout() {
			uni.removeStorageSync('userOptions');
			this.jump('logout');
		},
	},
};
</script>

<style lang="scss" scoped>
.store_login {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	.main {
		padding: 30rpx 60rpx;
		border: 2rpx solid $uni-color-green;
		border-radius: 10rpx;
		color: $uni-color-green;
		background-color: $uni-color-white;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.title {
			width: 400rpx;
			height: 150rpx;
			text-align: center;
			line-height: 150rpx;
		}

		.form {
			position: relative;
			padding-bottom: 120rpx;

			.input {
				border: 2rpx solid $uni-color-green;
			}

			.input:focus {
				border: 2rpx solid $uni-color-green;
			}

			.input:focus {
				border: 2rpx solid $uni-color-green;
			}

			.user_name {
				margin-bottom: 20rpx;
			}

			.checkout_btn {
				position: absolute;
				right: 20rpx;
				bottom: 60rpx;
				font-size: 24rpx;
			}
		}

		.btn_box {
			width: 400rpx;
			height: 100rpx;
			display: flex;
			justify-content: space-between;

			.btn {
				height: 30rpx;
				padding: 20rpx;
				line-height: 1;
				border-radius: 10rpx;
				color: $uni-color-white;
				background-color: $uni-color-green;
			}
		}
	}
}
</style>
